<template>
	<view class="current-matchmaking">
		<u-empty v-if="isEmpty" text="暂无招亲信息" mode="list"></u-empty>

		<view v-else class="info-container">
			<!-- 使用 u-cell-group 和 u-cell 替代 u-card   -->
			<u-cell-group :border="false">
				<view class="info-time">有效期：2025-01-01~2025-01-08</view>
				<view class="info-box-title">招亲要求</view>
				<view class="info-box-content">
					<view class="info-box-content-item">年龄：</view>
					<view class="info-box-content-item">身高：</view>
					<view class="info-box-content-item">学历：</view>
					<view class="info-box-content-item">职业：</view>
					<view class="info-box-content-item">籍贯：</view>
					<view class="info-box-content-item">房子：</view>
					<view class="info-box-content-item">车子：</view>
				</view>
				
				<view class="info-box-title">家庭情况描述</view>
				<view class="info-box-content"></view>
			</u-cell-group>

			<!-- 底部操作按钮 -->
			<view class="action-buttons">
				<u-button type="primary" size="medium" shape="circle" @click="$emit('viewApplicants')"
					customStyle="margin-right: 20rpx">
					查看报名({{ currentInfo.applicants.length }})
				</u-button>
				<u-button type="success" size="medium" shape="circle" @click="$emit('publish')">
					{{ currentInfo.status === 'draft' ? '继续发布' : '发布新的' }}
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			isEmpty() {
				return !Object.keys(this.currentInfo).length
			}
		},
		created() {
			console.log('currentInfo', this.currentInfo)
		}
	}
</script>

<style scoped lang="scss">
	.current-matchmaking {
		padding: 24rpx;
		background-color: #f8f8f8;
		// min-height: 100vh;
	}

	.info-container {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.08);
		margin-bottom: 24rpx;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
		}
		.info-time {
			padding: .5em;
			font-size: 1em;
			color: red;
		}
	}
	
	.info-box-title {
		padding: .3em 1em;
		border-radius: 2em;
		background-color: #f5f7fa;
		font-size: 1em;
	}
	
	.info-box-content {
		padding: 1em;
		.info-box-content-item {
			padding: .2em;
		}
	}

	.info-text {
		font-size: 24rpx;
		color: #909399;
		margin-left: 16rpx;
		position: relative;

		&:not(:last-child)::after {
			content: "·";
			position: absolute;
			right: -12rpx;
			color: #dcdfe6;
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #f0f0f0;
		position: sticky;
		bottom: 0;
		z-index: 10;

		.u-btn {
			flex: 1;
			border-radius: 50rpx;
			height: 80rpx;
			font-size: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);

			&:first-child {
				margin-right: 24rpx;
				background: linear-gradient(135deg, #409EFF, #2979FF);
			}

			&:last-child {
				background: linear-gradient(135deg, #67C23A, #5DAF34);
			}
		}
	}

	/* 优化u-cell-group样式 */
	::v-deep .u-cell-group__title {
		padding: 24rpx 32rpx 16rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
	}

	::v-deep .u-cell-item {
		padding: 24rpx 32rpx;

		.u-cell__body {
			padding: 0;
		}

		.u-cell__content {
			padding: 0;
		}
	}

	/* 添加动画效果 */
	.u-album {
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}
</style>